<template>
  <view v-if="paths.includes(currentPage)"  class="page_footer">
    <view class="footer_list page_footer_fixed">
      <image class="footer_center" :src="$imgPath('tabbar/center.png')" mode="heightFix" />
      <view v-for="(item,index) in tabsList" :key="index" :class="['list_item',{active:currentPage == item.pagePath}]" @click="clickItem(item)">
        <image class="item_icon" :src="$imgPath(item.iconPath)" mode="heightFix" />
        <image class="item_icon active" :src="$imgPath(item.selectedIconPath)" mode="heightFix"/>
        <text class="item_name">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 'pages/home/index',
        tabsList:[
          {
            "text": "主页",
            "pagePath": "pages/home/index",
            "iconPath": "tabbar/home.png",
            "selectedIconPath": "tabbar/home_active.png",
          },
          {
            "text": "置换",
            "pagePath": "#",
            "iconPath": "tabbar/zh.png",
            "selectedIconPath": "tabbar/zh_active.png",
          },
          {
            "text": "交织",
            "pagePath": "#",
            "iconPath": "tabbar/jz.png",
            "selectedIconPath": "tabbar/jz_active.png",
          },
          {
            "text": "祭坛",
            "pagePath": "#",
            "iconPath": "tabbar/jt.png",
            "selectedIconPath": "tabbar/jt_active.png",
          }
        ]
      }
    },
		computed: {
			paths() {
				return this.tabsList.map((item)=>item.pagePath)
			}
		},
		created(){
			const pages = getCurrentPages()
			const page = pages[pages.length-1]
			if(page){
				this.currentPage = page.route
			}
		},
    methods:{
      clickItem (item) {
        if(!item.pagePath || item.pagePath === '#'){
          this.$modal.showToast('开发中~') 
          return false
        }
        if(this.currentPage === item.pagePath){
          return false
        }
        this.currentPage = item.pagePath
        this.$tab.switchTab('/'+this.currentPage)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page_footer {
    width: 100%;
    height: 100rpx;
    .page_footer_fixed{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .footer_list{
      width: 100%;
      height: auto;
      background: linear-gradient(to top,#1B1613 0%,#1B1613 50%,transparent 100%);
      padding: 40rpx 40rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .footer_center{
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-40%);
        display: block;
        width: auto;
        height: 176rpx;
        cursor: pointer;
      }
      .list_item{
        cursor: pointer;
        color: #fff;
        height: 105rpx;
        .item_name{
          display: none;
        }
        .item_icon{
          display: block;
          width: auto;
          height: 100%;
          margin: 0 auto;
          &.active{
            display: none;
            transform: scale(1.12);
            transform-origin: 50% 50%;
          }
        }
        &:nth-of-type(4n+3){
          margin-left: 150rpx;
        }
        &.active{
          .item_icon{
            display: none;
            &.active{
              display: block;
            }
          }
        }
      }
    }
  }
</style>
